﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UserListPage.aspx.cs" Inherits="Easy.Web.Pages.PrivilegePages.UserListPage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="/_css/bootstrap.min.css" rel="stylesheet" />
    <link href="/_css/sort.css" rel="stylesheet" type="text/css" />
    <link href="/_css/common.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="/_css/iconfont.css" />
    <script src="/_js/jquery-1.9.1.min.js"></script>
    <script src="/_js/bootstrap.min.js"></script>
    <script src="/_js/custom.js" type="text/javascript"></script>
    <script src="/_js/common.js"></script>
    <script src="/_js/json2.js" type="text/javascript"></script>
    <script src="/_js/bootstrap-datetimepicker.min.js"></script>

    <!--zw-->
    <style>
         #loading{
            display:block;
            background-color: #c0c0c0;
            opacity: 0.5;
            height: 100%;
            width: 100%;
            position: fixed;
            z-index: 1;
            margin: 0px;
            padding: 0px;

        }
        #loading-center{
            width: 100%;
            height: 100%;
            position: relative;
        }
        #loading-center-absolute {
            position: absolute;
            left: 50%;
            top: 50%;
            height: 150px;
            width: 150px;
            margin-top: -75px;
            margin-left: -75px;
            -moz-border-radius: 50% 50% 50% 50%;
            -webkit-border-radius: 50% 50% 50% 50%;
            border-radius: 50% 50% 50% 50%;

        }
        .object{
            width: 20px;
            height: 20px;
            background-color: #FFF;
            position: absolute;
            -moz-border-radius: 50% 50% 50% 50%;
            -webkit-border-radius: 50% 50% 50% 50%;
            border-radius: 50% 50% 50% 50%;
            -webkit-animation: animate 0.8s infinite;
            animation: animate 0.8s infinite;
        }


        #object_one {
            top: 19px;
            left: 19px;

        }
        #object_two {
            top: 0px;
            left: 65px;
            -webkit-animation-delay: 0.1s;
            animation-delay: 0.1s;

        }
        #object_three {
            top: 19px;
            left: 111px;
            -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s;

        }
        #object_four {
            top: 65px;
            left: 130px;
            -webkit-animation-delay: 0.3s;
            animation-delay: 0.3s;
        }
        #object_five {
            top: 111px;
            left: 111px;
            -webkit-animation-delay: 0.4s;
            animation-delay: 0.4s;
        }
        #object_six {
            top: 130px;
            left: 65px;
            -webkit-animation-delay: 0.5s;
            animation-delay: 0.5s;
        }
        #object_seven {
            top: 111px;
            left: 19px;
            -webkit-animation-delay: 0.6s;
            animation-delay: 0.6s;
        }
        #object_eight {
            top: 65px;
            left: 0px;
            -webkit-animation-delay: 0.7s;
            animation-delay: 0.7s;
        }

        @-webkit-keyframes animate {

            25% {
                -ms-transform: scale(1.5);
                -webkit-transform: scale(1.5);
                transform: scale(1.5);
            }


            75% {
                -ms-transform: scale(0);
                -webkit-transform: scale(0);
                transform: scale(0);
            }


        }

        @keyframes animate {
            50% {
                -ms-transform: scale(1.5,1.5);
                -webkit-transform: scale(1.5,1.5);
                transform: scale(1.5,1.5);
            }

            100% {
                -ms-transform: scale(1,1);
                -webkit-transform: scale(1,1);
                transform: scale(1,1);
            }

        }


    </style>
   
 <!--zw-end-->   

    <script type="text/javascript">
        var Id = "";
        var NewId = "";
        var UserId = "";
        $(document).ready(function () {
            getUserList();
            GetBusinessList();
            GetLoading();
            $('#loading').hide();
            //横向绑定，填充表头背景
            $("#userList-title").parent().css({ "background": "#F5F6FA", "border-top": "1px solid #e1e6eb", "border-bottom": "1px solid #e1e6eb" });
            $("div.table-responsive").scroll(function () {
                var left = (-1) * $(this).scrollLeft();
                $("#userList-title").css("left", left);
            });
        });

        function GetLoading() {
            var str = "";

            str += "<div id='loading'>"
                  + "<div id='loading-center'>"
                   + "<div id='loading-center-absolute'>"
                        + "<div class='object' id='object_one'></div>"
                        + "<div class='object' id='object_two'></div>"
                        + "<div class='object' id='object_three'></div>"
                        + "<div class='object' id='object_four'></div>"
                        + "<div class='object' id='object_five'></div>"
                        + "<div class='object' id='object_six'></div>"
                        + "<div class='object' id='object_seven'></div>"
                        + "<div class='object' id='object_eight'></div>"


                  + "</div>"
                + "</div>"
               + "</div>"


            $("#OnLoading").html(str);


        }
        //zw
        function GetBusinessList() {
            $.ajax({
                url: "/Service/Privilege/GetBusinessUnit.ashx",
                async: false,
                type: "post",
                dataType: "json",
                data: {
                },
                success: function (data, textStatus) {
                    var SMShtml = "<table class='table table-hover'>"
                            + " <thead><tr><th>选择</th><th></th><th></th><th></th><th></th><th>部门名称</th>"
                                               + "</tr></thead><tbody>";
                    for (var i = 0; i < data.length; i++) {
                        var item = data[i];
                        SMShtml += "<tr  name='list' id=\"" + (i + 1) + "\">"
                            + "<td>" + "<input type='checkbox' name='test' onclick='isChecked(this,\"" + 'test' + "\");' id=" + item.BusinessUnitId + " />" + "</td>"
                             + "<td></td><td></td><td></td><td></td>"
                        + "<td  id=\"list" + (i + 1) + "\">" + item.Name + "</td>"
                       + "</tr>";
                    }
                    SMShtml += "</tbody></table>";
                    $("#ListInnerContainer").html(SMShtml);
                },
                error: function (data, textStatus) {
                    alert("ajax错误");
                }
            });
        }

        //zw-end
        function getUserList() {
            $.ajax({
                url: "/Service/Privilege/GetUserList.ashx",
                async: false,
                type: "post",
                dataType: "json",
                data: {
                },
                success: function (data, textStatus) {
                    var SMShtml1 = "<table class='table table-hover'>"
                            + " <thead><tr><th>#</th><th>用户名称</th><th>所属部门"
                                               + "  </th><th>"
                                               + "操作</th>"
                                               + "<th>更改用户部门</th>"
                                               + "<th>迁移记录</th></tr></thead></table>";
                    $("#userList-title").html(SMShtml1);

                    var SMShtml = "<table class='table table-hover'><tbody>";

                    for (var i = 0; i < data.length; i++) {

                        var item = data[i];
                        SMShtml += "<tr  name='list' id=\"" + (i + 1) + "\">"
                        /*NO*/ + "<td>" + (i + 1) + "</td>"
                        + "<td  id=\"list" + (i + 1) + "\">" + item.Name + "</td>"
                        + "<td   id=\"list" + (i + 1) + "\">" + item.BusinessUnitName + "</td>"
                      + "<td   id=\"list" + (i + 1) + "\"><button type='button' onclick='showDetail(\"" + item.UserId + "\");' class='btn btn-primary ng-binding'>查看</button></td>"
                      + "<td   id=\"list" + (i + 1) + "\"><button type='button' onclick='keep(\"" + item.UserId + "\");' class='btn btn-primary ng-binding btn-lookup' fieldid='owningbusinessunit' etn='BusinessUnit'>更改</button></td>"

                      + "<td   id=\"list" + (i + 1) + "\"><button type='button' onclick='qianyi(\"" + item.UserId + "\");' class='btn btn-primary ng-binding btn-lookup' fieldid='owninguser' etn='SystemUser'>迁移</button></td>"

                                + "</tr>";
                    }

                    //<button class="btn btn-primary ng-binding btn-lookup" id="owningbusinessunit_btn" fieldid="owningbusinessunit" etn="BusinessUnit" type="button">Search</button>
                    SMShtml += "</tbody></table>";
                    $("#userList_div").html(SMShtml);

                    //滚动table的高度
                    var height = window.innerHeight - 183;
                    $("#userList_div").height(height);
                },
                error: function (data, textStatus) {
                    alert("ajax错误");

                }

            });

        }

        function showDetail(id) {
            window.location = "UserInfoPage.aspx?Id=" + id;
        }

        function btn_add() {
            window.location = "UserInfoPage.aspx";
        }

        function keep(id) {
            Id = id;
            $("#btn_function").attr('onclick', 'changeBs()');
        }

        function changeBs() {
            core.Lookup.SelectedLookup();
            var NewId = core.Lookup.Selected["oid"];
            $.ajax({
                url: "/Service/Privilege/ChangeBs.ashx",
                async: true,
                type: "post",
                dataType: "json",
                data: {
                    "UserId": Id,
                    "NewId": NewId
                },
                beforeSend: function () {
                    $('#loading').show();
                },
                success: function (data, textStatus) {
                    //           alert("修改成功");
                    window.location.reload();
                },
                error: function (data, textStatus) {
                    alert("ajax错误");
                }
            });
        }
        //zw-end

        function qianyi(id) {
            UserId = id;
            //alert(UserId);
            $("#btn_function").attr('onclick', 'btn_MigrateUserRecords()');
        }


        function btn_MigrateUserRecords() {
            //var SystemUserId = $("#UserId").val();
            var SystemUserId = UserId;
            core.Lookup.SelectedLookup();
            var ToWho = core.Lookup.Selected["oid"];
            $.ajax({
                url: "/Service/Privilege/MigrateUserRecords.ashx",
                async: true,
                type: "post",
                dataType: "json",
                data: {
                    "SystemUserId": SystemUserId,
                    "ToWho": ToWho
                },
                beforeSend: function () {
                    $("#loading").show();
                },
                success: function (data, textStatus) {
                    //alert("success");
                    $("#loading").hide();
                },
                error: function (data, textStatus) {
                    alert("错误");
                }
            });

        }

        //滚动table高度响应
        $(window).resize(function () {
            var height = window.innerHeight - 183;
            $("#userList_div").height(height);
        });

    </script>

    <style>
         .row{margin-right:0px;}
        .panel{border:none;}
        .page-header{margin:15px;}
         .page-header+.btn-default{margin:0px 15px 15px 5px;}
        .panel-heading{padding:3px 15px;height:40px;line-height:34px;}
        .table{padding:0;margin:0;border:none;}      
        .table thead th,.table tbody td{width:168px;}      
        .table th.table-btn,.table tbody td.table-btn{width:100px;}
        .table th:first-child,.table tbody td:first-child{width:30px;}
        #userList_div, #userList-title{min-width:1149px;}
        .table-responsive{border:1px solid #e1e6eb;border-top:none;}     
        #userList-title{position:relative;}
        #userList-title thead tr th{border-bottom:none;}
        @media screen and (max-width: 767px){
            .table-responsive {
                margin-bottom:0px;
                border:none;
                overflow:auto;
                border:1px solid #e1e6eb;
                border-top:none;
            }
        }
    </style>
</head>
<body>
     <div id="OnLoading"></div>

    <form id="form1" runat="server">
    <div class="">
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">
                    用户列表
                    <button type='button' style="float: right" class='btn btn-primary ng-binding'
                            onclick="btn_add();">
                            Add</button>
                </h1>
                
            </div>
            <!-- /.col-lg-12 -->
        </div>
        <!-- /.row -->
        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">
                    
                    <!-- /.panel-heading -->
                    <div class="panel-body">
                        <div class="table-responsive" style="overflow:hidden;border-bottom:none;">
                            <div id="userList-title">
                            </div>
                        </div>
                        <div class="table-responsive">
                            <div id="userList_div">
                            </div>
                        </div>
                        <!-- /.table-responsive -->
                    </div>
                    
                    <!-- /.panel-body -->
                </div>
                <!-- /.panel -->
            </div>
        </div>
    </div>

         <div id="LookupModal" class="modal fade in" etn="" fieldid="">
             <div class="modal-dialog">
                 <div class="modal-content">
                     <div class="modal-header">
                         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                             <span aria-hidden="true">&times;</span></button>
                         <h4 class="modal-title">搜索:<span id="modal-title-etn"></span></h4>
                     </div>
                     <div class="modal-body" style="max-height: 500px; overflow: hidden">
                         <div class="input-group">
                             <input type="text" id="txt_lookupsearchValue" class="form-control" placeholder="Search for..." />
                             <span class="input-group-btn">
                                 <button class="btn btn-primary ng-binding" type="button" onclick="core.Lookup.Search();">
                                     搜索</button>
                             </span>
                         </div>
                         <div id="LookupListContainer">
                             <div id="LookupListContainer-title">
                                 <table id="" class="table table-condensed table-hover">
                                     <colgroup></colgroup>
                                     <thead></thead>
                                 </table>
                             </div>
                             <div id="LookupListContainer-body">
                                 <table id="" class="table table-condensed table-hover">
                                     <colgroup></colgroup>
                                     <tbody></tbody>
                                 </table>
                             </div>
                         </div>
                     </div>
                     <div class="modal-footer">
                         <nav id="ListPageing" style="float: left;">
                             <ul class="pagination" style="margin: 0;">
                                 <li><a href="javascript:void(0);" id="pageFirst" aria-label="Firset" onclick='core.Lookup.FirstPage();'><span aria-hidden="true">&laquo;</span>
                                 </a></li>
                                 <li><a href="javascript:void(0);" id="pagePrevious" aria-label="Previous" onclick='core.Lookup.PrePage();'><span aria-hidden="true">&lsaquo;</span>
                                 </a></li>
                                 <li><span id="pageInfo">1\50</span></li>
                                 <li><a href="javascript:void(0);" id="pageNext" aria-label="Next" onclick='core.Lookup.NextPage();'><span aria-hidden="true">&rsaquo;</span>
                                 </a></li>
                                 <li><a href="javascript:void(0);" id="pageLast" aria-label="Last" onclick='core.Lookup.LastPage();'><span aria-hidden="true">&raquo;</span>
                                 </a></li>
                             </ul>
                         </nav>
                         <button type="button" id="btn_function" class="btn btn-primary ng-binding" onclick="core.Lookup.SelectedLookup();"
                             data-dismiss="modal">
                             OK</button>
                         <!--
                            <button type="button" class="btn btn-primary ng-binding" onclick="core.Lookup.SelectedLookup();"
                                data-dismiss="modal">
                                OK</button>
                            -->
                     </div>
                 </div>
                 <!-- /.modal-content -->
             </div>
             <!-- /.modal-dialog -->
         </div>
               
    </form>
    <script src="/_js/Core.js"></script>
    <script src="/_js/Core.Lookup.js"></script>
    
</body>
</html>
